<template>
  <div class="select-group">
    <el-select :model-value="selectedCubeType" @update:model-value="$emit('update:selectedCubeType', $event)" class="cube-select" placeholder="选择魔方类型">
      <el-option v-for="type in cubeTypes" :key="type.name" :label="type.display_name" :value="type.name" />
    </el-select>
    <div class="vs-badge">
      <span class="vs-text">VS</span>
    </div>
    <el-select :model-value="selectedRound" @update:model-value="$emit('update:selectedRound', $event)" class="round-select" placeholder="选择轮次">
      <el-option v-for="round in roundTypes" :key="round" :label="round" :value="round" />
    </el-select>
  </div>
</template>

<script setup>
import { defineProps } from 'vue';

const props = defineProps({
  selectedCubeType: String,
  cubeTypes: Array,
  selectedRound: String,
  roundTypes: Array
});
</script>

<style scoped>
.select-group {
  display: flex;
  flex-direction: column;
  gap: 15px;
  align-items: center;
  margin-right: 20px;
}

.cube-select,
.round-select {
  width: 160px;
}

.vs-badge {
  background: #ffffff;
  padding: 12px 20px;
  border-radius: 50px;
  margin: 10px 0;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.vs-text {
  font-size: 22px;
  font-weight: bold;
  background: linear-gradient(45deg, #409EFF, #F56C6C);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
</style>